<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="elSearchFormRef"
               :inline="true"
               :model="searchInfo"
               class="demo-form-inline"
               :rules="searchRule"
               @keyup.enter="onSubmit">
        <el-form-item label="创建日期"
                      prop="createdAt">
          <template #label>
            <span>
              创建日期
              <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-date-picker v-model="searchInfo.startCreatedAt"
                          type="datetime"
                          placeholder="开始日期"
                          :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
          —
          <el-date-picker v-model="searchInfo.endCreatedAt"
                          type="datetime"
                          placeholder="结束日期"
                          :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
        </el-form-item>

        <el-form-item label="邀请人姓名"
                      prop="name">
          <el-input v-model="searchInfo.name"
                    placeholder="搜索条件" />

        </el-form-item>
        <el-form-item label="状态"
                      prop="st">
          <el-select v-model="searchInfo.st"
                     filterable
                     clearable
                     placeholder="搜索条件">
            <el-option key="1"
                       label="已答题"
                       value="1" />
            <el-option key="2"
                       label="未答题"
                       value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     icon="search"
                     @click="onSubmit">查询</el-button>
          <el-button icon="refresh"
                     @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary"
                   icon="plus"
                   @click="openDialog">新增</el-button>
        <el-button type="primary"
                   icon="upload"
                   @click="openDialogExcel">导入</el-button>
        <el-popover v-model:visible="deleteVisible"
                    :disabled="!multipleSelection.length"
                    placement="top"
                    width="160">
          <p>确定要删除吗？</p>
          <div style="text-align: right; margin-top: 8px;">
            <el-button type="primary"
                       link
                       @click="deleteVisible = false">取消</el-button>
            <el-button type="primary"
                       @click="onDelete">确定</el-button>
          </div>
          <template #reference>
            <el-button icon="delete"
                       style="margin-left: 10px;"
                       :disabled="!multipleSelection.length"
                       @click="deleteVisible = true">删除</el-button>
          </template>
        </el-popover>
      </div>
      <el-table ref="multipleTable"
                style="width: 100%"
                tooltip-effect="dark"
                :data="tableData"
                row-key="ID"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55" />
        <el-table-column label="序号"
                         type="index"
                         width="100px"
                         align="center" />
        <el-table-column align="left"
                         label="邀请人"
                         prop="name"
                         width="200" />
        <el-table-column align="left"
                         label="电话号码"
                         prop="phone"
                         width="250" />
        <el-table-column align="left"
                         label="状态"
                         prop="st"
                         width="200">
          <template #default="scope">
            <div v-if="scope.row.st==1">
              已答题
            </div>
            <div v-else>
              未答题
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left"
                         label="提交时间"
                         width="180">
          <template #default="scope">
            <div v-if="scope.row.st==1">
              {{ formatDate(scope.row.update) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left"
                         label="操作">
          <template #default="scope">
            <el-button type="primary"
                       link
                       icon="edit"
                       class="table-button"
                       @click="updateInvitationFunc(scope.row)">变更</el-button>
            <el-button type="primary"
                       link
                       icon="delete"
                       @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
                       :current-page="page"
                       :page-size="pageSize"
                       :page-sizes="[10, 30, 50, 100]"
                       :total="total"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange" />
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible"
               :before-close="closeDialog"
               :title="type==='create'?'添加':'修改'"
               destroy-on-close>
      <el-scrollbar height="500px">
        <el-form :model="formData"
                 label-position="right"
                 ref="elFormRef"
                 :rules="rule"
                 label-width="100px">
          <el-form-item label="邀请人:"
                        prop="name">
            <el-input v-model="formData.name"
                      :clearable="true"
                      placeholder="请输入邀请人姓名" />

          </el-form-item>
          <el-form-item label="电话号码:"
                        prop="phone">
            <el-input v-model="formData.phone"
                      :clearable="true"
                      placeholder="请输入邀请人电话号码" />

          </el-form-item>

        </el-form>

      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary"
                     @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogExcelUp"
               :before-close="closeDialog"
               title="上传excel导入并重置人员"
               destroy-on-close>
      <el-scrollbar height="500px">
        <el-upload class="upload-demo"
                   drag
                   :limit="1"
                   :data="questionnaireUuid"
                   :headers="{ 'x-token': userStore.token }"
                   :action="`${path}/invitation/invitationUpExcel`"
                   multiple>
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖拽上传或者 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              请上传excel
            </div>
          </template>
        </el-upload>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary"
                     @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup >
import {
  createInvitation,
  deleteInvitation,
  deleteInvitationByIds,
  updateInvitation,
  findInvitation,
  getInvitationList
} from '@/api/invitation'

// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from "vue-router"
import { useUserStore } from '@/pinia/modules/user'
defineOptions({
  name: 'Invitation'
})
const userStore = useUserStore()
const router = useRouter()
const path = ref(import.meta.env.VITE_BASE_API)

const questionnaireUuid = ref({ questionnaireUuid: router.currentRoute.value.query.uuid })

// 自动化生成的字典（可能为空）以及字段
const formData = ref({
  name: '',
  phone: '',
})


// 验证规则
const rule = reactive({
  name: [
    {
      required: true,
      message: '请输入邀请人名称',
      trigger: ['input', 'blur'],
    },
    {
      whitespace: true,
      message: '不能只输入空格',
      trigger: ['input', 'blur'],
    },
  ],
  phone: [
    { required: true, message: '请输入数字', trigger: 'blur' },
    {
      validator: function (rule, value, callback) {
        if (/^1[34578]\d{9}$/.test(value) == false) {
          callback(new Error("手机号格式错误"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
})

const searchRule = reactive({
  createdAt: [
    {
      validator: (rule, value, callback) => {
        if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
          callback(new Error('请填写结束日期'))
        } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
          callback(new Error('请填写开始日期'))
        } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
          callback(new Error('开始日期应当早于结束日期'))
        } else {
          callback()
        }
      }, trigger: 'change'
    }
  ],
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})

// 重置
const onReset = () => {
  searchInfo.value = {}
  getTableData()
}

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async (valid) => {
    if (!valid) return
    page.value = 1
    pageSize.value = 10
    getTableData()
  })
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

// 修改页面容量
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async () => {
  const table = await getInvitationList({ questionnaireUuid: questionnaireUuid.value.questionnaireUuid, page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

getTableData()

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
}

// 获取需要的字典 可能为空 按需保留
setOptions()


// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 删除行
const deleteRow = (row) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteInvitationFunc(row)
  })
}


// 批量删除控制标记
const deleteVisible = ref(false)

// 多选删除
const onDelete = async () => {
  const ids = []
  if (multipleSelection.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据'
    })
    return
  }
  multipleSelection.value &&
    multipleSelection.value.map(item => {
      ids.push(item.ID)
    })
  const res = await deleteInvitationByIds({ ids })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === ids.length && page.value > 1) {
      page.value--
    }
    deleteVisible.value = false
    getTableData()
  }
}

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 更新行
const updateInvitationFunc = async (row) => {
  const res = await findInvitation({ ID: row.ID })
  type.value = 'update'
  if (res.code === 0) {
    formData.value = res.data.reinvitation
    console.log(formData.value)
    dialogFormVisible.value = true
  }
}


// 删除行
const deleteInvitationFunc = async (row) => {
  const res = await deleteInvitation({ ID: row.ID })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === 1 && page.value > 1) {
      page.value--
    }
    getTableData()
  }
}

// 弹窗控制标记
const dialogFormVisible = ref(false)





// 打开弹窗
const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
  formData.value = {
    questionnaireUuid: '',
    name: '',
    phone: '',
  }
}
// 弹窗确定
const enterDialog = async () => {
  elFormRef.value?.validate(async (valid) => {
    if (!valid) return
    let res
    switch (type.value) {
      case 'create':
        res = await createInvitation(formData.value)
        break
      case 'update':
        res = await updateInvitation(formData.value)
        break
      default:
        res = await createInvitation(formData.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeDialog()
      getTableData()
    }
  })
}

const dialogExcelUp = ref(false)

//打开上传excel的功能
const openDialogExcel = () => {
  dialogExcelUp.value = true
}

</script>

<style>
</style>
